<template>
	<view class="calendar">
		<u-calendar v-model="show" :mode="mode" @change="change" max-date="2050-01-01">
			<view slot="tooltip">
					<view class="title">
						{{text}}
					</view>
				</view>
		</u-calendar>
		<u-button @click="show = true">日期范围查询</u-button>
	</view>
</template>

<script>
	export default {
		props:{
			mode:{//日期模式 date-为单个日期，range-为选择日期范围
				type:String,
				default:'date'
			}
		},
		data() {
			return {
				show: false,
				text:this.mode === 'date' ? '' : '请选择起始日期和结束日期'
			}
		},
		methods:{
			change(val){
				if(this.mode === "date"){//单个日期模式
					this.$emit("changeCalendar",val.result)
				}else{//日期范围模式
					console.log(val)
					this.$emit("changeCalendar",{sday:val.startDate,eday:val.endDate})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		padding: 10rpx 0;
		text-align: center;
		font-size: 36rpx;
		color: #FA3534;
	}
</style>
